<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情页面</title>
    <link rel="stylesheet" href="../css/detail.css">
</head>

<body>
    <header>
        <div class="nav">
            <div class="navBox">
                <ul class="loginBox">
                    <li class="active ind">亲,请登录</li>
                    <li><a href="./register.html">免费注册</a></li>
                    <li>手机逛淘宝</li>
                </ul>
                <div class="loginShadow">
                    <div class="zhezhao"></div>
                    <p class="shadowImag"><span class="outLogin">退出</span><span>用户信息</span></p>
                    <div class="shadowImg"><img src="../images/index/userHead.jpg" alt=""></div>
                    <span class="shadowNick">用户昵称</span>
                    <p class="shadowState">查看你的专属权益</p>
                </div>
                <ul class="navMenu">
                    <li class="active"><a href="./index.html">淘宝网首页</a></li>
                    <li>我的淘宝</li>
                    <li><a href="./cart.html">购物车</a></li>
                    <li>收藏夹</li>
                    <li>商品分类</li>
                    <li>卖家中心</li>
                    <li>联系客服</li>
                    <li>网址导航</li>
                </ul>
            </div>
        </div>
    </header>

    <nav>
        <img src="../images/detail/tmlogo.jpeg" alt="">
        <div><span class="dianming">千峰旗舰店</span><br><span class="biaoqian">品牌直销</span></div>
        <div>描述 服务 物流<br><span class="pingfen">4.9↑ 4.9↑ 4.9↑</span></div>
        <div>手机逛</div>
        <button class="act">搜本店</button>
        <button>搜天猫</button>
        <input type="text" placeholder="搜天猫 品牌/商品/店铺">
    </nav>

    <section>
        <div class="box" id="box">
            <!-- 这里渲染页面 -->

            <div class="lef">
                <!-- 展示图片的盒子 -->
                <div class="show">
                    <img src="${result.info.img_big_logo}" alt="">
                    <!-- 遮罩层盒子 -->
                    <div class="mask"></div>
                </div>
                <!-- 列表盒子 -->
                <div class="list">
                    <p class="active">
                        <img src="${result.info.img_big_logo}" data-show="${result.info.img_big_logo}"
                            data-enlarge="${result.info.img_big_logo}" alt="">
                    </p>
                    <p>
                        <img src="${result.info.img_big_logo}" data-show="${result.info.img_big_logo}"
                            data-enlarge="${result.info.img_big_logo}" alt="">
                    </p>
                    <p class="active">
                        <img src="${result.info.img_big_logo}" data-show="${result.info.img_big_logo}"
                            data-enlarge="${result.info.img_big_logo}" alt="">
                    </p>
                    <p class="active">
                        <img src="${result.info.img_big_logo}" data-show="${result.info.img_big_logo}"
                            data-enlarge="${result.info.img_big_logo}" alt="">
                    </p>
                </div>
                <!-- 放大的盒子 -->
                <div class="enlarge" style="background-image: url(${result.info.img_big_logo});"></div>
            </div>
            <div class="cen">
                <p class="title">${result.info.title}</p>
                <div class="is_hot: true"><img src="../images/detail/背景图片.png" alt=""></div>
                <div class="priceBox">
                    <img class="tm618" src="../images/detail/tianmao618bg.png" alt="">
                    <del>
                        <p class="price">原价￥${result.info.price}</p>
                    </del>
                    <p class="current_price">现价￥${result.info.current_price}</p>
                    <p class="is_sale">本店折扣${result.info.sale_type}</p>
                </div>
                <p class="goods_number">剩余库存${result.info.current_price}</p>
                <button class="sshop">立即购买</button>
                <button class="scar">加入购物车</button>
            </div>

        </div>
    </section>

    <!-- 引入浮动框架集  frameborder : 框架集边框 -->
    <iframe src="footer.html" style="width:100%;height:300px" name="iframe_a" border="0" marginwidth="0"
        marginheight="0" scrolling="no" allowtransparency="yes" frameborder="0"></iframe>

    <script src="../js/jquery.min.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/detail.js"></script>
    <script>
        /*
        放大镜
            1. 使用 Enlarge 构造函数创建一个对象, 完成放大镜功能
        */
    </script>
</body>

</html>